<template>
  <div>
    <Headline :headline1="$t('m.FaceRecognition')+'  /  '" :headline2="$t('m.GoThroughRecord')" />
    <a-card style="width: 100%">
      <a-tabs
        default-active-key="1"
        @change="callback"
        style="margin-bottom: 15px"
      >
        <a-tab-pane key="1" :tab="$t('m.Area')">
          <a-tree-select
            style="width: 200px"
            @change="areaSelect"
            v-model="areaValue"
            show-search
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :placeholder="$t('m.pleaseChoose')"
            allow-clear
            tree-default-expand-all
          >
            <a-tree-select-node
              v-for="item in departmentListB"
              :key="item.id"
              :value="item.id"
              :cont="item"
              :title="item.areaname"
            >
              <a-tree-select-node
                :key="citem.id"
                :title="citem.areaname"
                :value="citem.id"
                :cont="citem"
                v-for="citem in item.children"
              >
                <a-tree-select-node
                  :key="ccitem.id"
                  :title="ccitem.areaname"
                  :value="ccitem.id"
                  :cont="ccitem"
                  v-for="ccitem in citem.children"
                >
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="$t('m.Equipment')" force-render>
          <a-table
            :columns="columns"
            :rowKey="(record) => record.id"
            :data-source="data"
            :pagination="false"
          >
            <div slot="index" slot-scope="text, tags, i">
              {{ i + 1 }}
            </div>
            <div slot="show" slot-scope="text, tags, i">
              <a-button type="primary" @click="show(text, tags, i)">{{$t('m.Examine')}}</a-button>
            </div>
          </a-table>
          <a-pagination
            class="pages"
            show-size-changer
            :default-current="1"
            :total="totalA"
            @change="setPagesA"
            :pageSizeOptions="['5', '10', '30', '40']"
            @showSizeChange="setShowSizeChangeA"
          />
        </a-tab-pane>
        <a-tab-pane key="3" :tab="$t('m.Organization')">
          <select-tree
            :placeholder="$t('m.pleaseChoose')"
            :treeDataList="departmentList"
            @checkData="argumentSelect"
          />
        </a-tab-pane>
      </a-tabs>
      <div v-if="flag">
        <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="width: 200px; margin-right: 15px"
          v-model="forminitialC.key"
          enter-button
          @search="onSearch"
        />
        {{$t('m.SelectTime')}}：
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['Start Time', 'End Time']"
          @ok="timeOk"
          style="margin-right: 15px;width:200px;"
        />
        {{$t('m.ReadHead')}}：<a-select
          default-value="-1"
          style="width: 115px; margin-right: 15px"
          @change="handleChange"
        >
          <a-select-option v-for="item in treeDataList" 
          :value="item.code" :key="item.code">{{item.name}}</a-select-option>
        
        </a-select>
        {{$t('m.personalInformation')}}：<a-input
          type="text"
          @click="personInfo"
          v-model="person"
          style="width: 150px; margin-right: 15px"
        ></a-input>

        <a-checkbox @change="checkChange"> {{$t('m.WhetherToDisplayChildNodes')}} 

        </a-checkbox>
        <a-button icon="file" @click="exportExcel" type="primary"
          >{{$t('m.ExportExcel')}}</a-button
        >
        <a-table
          style="margin-top: 30px"
          :columns="innerColumns"
          :rowKey="(record, i) => i"
          :data-source="innerData"
          :pagination="false"
          bordered
        >
          <div slot="joinBlack" slot-scope="text, tags, i">
            <a
              @click="joinBlack(text, tags, i)"
              type="primary"
              style="margin-right: 10px"
              >{{$t('m.blacklist')}}</a
            >
            <a icon="zoom-out" @click="showImag(text, tags, i)" type="primary"
              >{{$t('m.Examine')}}</a
            >
          </div>
        </a-table>
      </div>
    </a-card>

    <a-modal
      :title="$t('m.personalInformation')"
      :visible="visibleA"
      @cancel="handleCancelA"
      :footer="null"
    >
      <img :src="imgSrc" />
    </a-modal>
    <a-modal
      :title="$t('m.DiscernRecord')"
      width="800px"
      :visible="visibleB"
      @cancel="handleCancelB"
      :footer="null"
    >
      <a-input-search
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        style="width: 200px; margin-right: 15px"
        v-model="forminitialC.key"
        enter-button
        @search="onSearch"
      />

      <a-range-picker
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['Start Time', 'End Time']"
        @ok="timeOk"
        style="margin-right: 15px"
      />
      {{$t('m.ReadHead')}}
      <a-select
        default-value="-1"
        style="width: 115px; margin-right: 15px"
        @change="handleChange"
      >
        <a-select-option
          v-for="item in treeDataList"
          :value="item.code"
          :key="item.code"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      {{$t('m.personalInformation')}}<a-input
        type="text"
        @click="personInfo"
        v-model="person"
        style="width: 150px; margin-right: 15px"
      ></a-input>

      <a-checkbox @change="checkChange"> {{$t('m.WhetherToDisplayChildNodes')}} </a-checkbox>
      <a-button icon="file" @click="exportExcel" type="primary"
        >{{$t('m.ExportExcel')}}</a-button
      >
      <a-table
        style="margin-top: 40px"
        :columns="innerColumns"
        :rowKey="(record, i) => i"
        :data-source="innerData"
        :pagination="false"
      >
        <div slot="joinBlack" slot-scope="text, tags, i">
          <a
            @click="joinBlack(text, tags, i)"
            type="primary"
            style="margin-right: 10px"
            >{{$t('m.blacklist')}}</a
          >
          <a icon="zoom-out" @click="showImag(text, tags, i)" type="primary"
            >{{$t('m.Examine')}}</a
          >
        </div>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import {
  getDeviceList,
  getStaffOrStudInfoList,
  getRecordList,
  exportExce,
  addBlackName,
} from "@/api/faceRecognition";
import { getWidgetDictionaryList } from "@/api/entrance/cloudDoor";
import { getAreaList } from "@/api/perUnit";
import SelectTree from "@/components/common/SelectTree";
import { getdiction } from "@/api/dictionaries";
export default {
  name: "AccessRecords",
  components: { Headline, SelectTree },
  data() {
    return {
      totalA: 0,
      visibleB: false,
      flag: true,
      visibleA: false,
      visible: false,
      departmentListB: [],
      departmentList: [],
      data: [],
      fromdic: {
        groupcode: "SYS0000005",
        // insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      dictionariesA: [],
      imgSrc: "",
      columns: [
        { title: this.$t('m.SerialNumber'), scopedSlots: { customRender: "index" } },
        { title: this.$t('m.deviceNumber'), dataIndex: "machineid" },
        { title: this.$t('m.Name'), dataIndex: "devname" },
        { title: this.$t('m.Operation'), scopedSlots: { customRender: "show" } },
      ],
      forminitial: {
        start: 0,
        limit: 10,
        devClass: 2,
        page: 1,
      },
      DataA: [],
      ColumnsA: [
        { title: this.$t('m.jobnumber'), dataIndex: "stafforstucode" },
        { title: this.$t('m.Name'), dataIndex: "stafforstuname" },
        {
          title: this.$t('m.Sex'),
          dataIndex: "sex",
          customRender: function (text) {
            if (text == "1") {
              return "男";
            } else {
              return "女";
            }
          },
        },
        { title: this.$t('m.coherentUnits'), dataIndex: "orgname" },
      ],
      innerColumns: [
        {
          title: this.$t('m.direction'),
          dataIndex: "direction",
          customRender: function (text) {
            if (text == "1") {
              return "进";
            } else {
              return "出";
            }
          },
        },
        { title: this.$t('m.RecognitionTime'), dataIndex: "recordtime" },
        { title: this.$t('m.CardNumber'), dataIndex: "cardno" },
        { title: this.$t('m.jobnumber'), dataIndex: "stafforstucode" },
        { title: this.$t('m.Person'), dataIndex: "stafforstuname" },
        { title: this.$t('m.AnimalHeat'), dataIndex: "tiwen" },
        { title: this.$t('m.AccessControlOrAccess'), dataIndex: "doorname" },
        { title: this.$t('m.department'), dataIndex: "custorgname" },
        { title: this.$t('m.Operation'), scopedSlots: { customRender: "joinBlack" } },
      ],
      innerData: [],
      areaValue: "",
      forminitialC: {
        start: 0,
        limit: 10,
        devId: 0,
        page: 1,
        devClass: "0",
        areaCode: "",
        ymOrgTreeCode: "",
        key: "",
        viewChild: false,
        startTime: "",
        endTime: "",
        dateTimeType: "",
        readHead: "",
        staffOrStudInfoId: 0,
        //startDate:this.$moment().subtract(1, "months").format("YYYY-MM-DD")
      },
      forminitialE: {
        groupcode: "SYS0000016",
        insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      forminitialD: {
        start: 0,
        limit: 10,
        page: 1,
        infoType: 0,
        status: 1,
      },
      person: "",
      treeDataList: [],
      // exportParams:{
      //   devId:'',
      //   devClass:'',
      //   areaCode:'',
      //   ymOrgTreeCode:''
      // }
    };
  },
  created() {
    this._getdiction();
    getAreaList()
      .then((res) => {
        this.departmentListB = res.data;
        this.areaValue = res.data[0].areaname
        this.forminitialC.areaCode = res.data[0].areacode
        this.getFaceRecordList();
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    this.discernList();
    this._getDeviceList();
    
    getWidgetDictionaryList({ params: this.forminitialE })
      .then((res) => {
        this.treeDataList = res.data.data;
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
      _getdiction() {
      getdiction({ params: this.fromdic }).then((res) => {
        console.log(res);
        this.dictionariesA = res.data.data;
      });
    },
    show(text, tags, i) {
      this.visibleB = true;
      this.forminitialC.areaCode = "";
      this.forminitialC.ymOrgTreeCode = "";
      this.forminitialC.devId = tags.id;

      this.getFaceRecordList();
    },
    setShowSizeChangeA(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPagesA(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
    _getDeviceList() {
      getDeviceList({ params: this.forminitial })
        .then((res) => {
          this.totalA = res.data.total;
          this.data = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCancelB() {
      this.visibleB = false;
    },
    handleCancelA() {
      console.log("a");
      this.visibleA = false;
    },
    showImag(text, tags, i) {
      this.visibleA = true;
      this.imgSrc = tags.recordimg;
      console.log(tags);
    },
    onSelectChangeA(selectedRowKeys, selectedRows) {
      this.person = selectedRows[0].stafforstuname;
      this.forminitialC.staffOrStudInfoId = selectedRows[0].id;
    },
    exportExcel() {
      exportExce(this.forminitialC)
        .then((res) => {
          location.href = this.$store.state.BaseUrl + res.data.msg;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    personInfo() {
      this.visible = true;
      this.discernList();
    },
    handleOk() {
      if (this.forminitialC.staffOrStudInfoId == "")
        return this.$message.warning("请选择人员信息");
      this.getFaceRecordList();
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
      // this.selectedRowKeysList = []
    },
    joinBlack(text, tags, i) {
      console.log(tags.cardno);
      addBlackName({ cardNos: tags.cardno })
        .then((res) => {
          console.log(res);
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
          }
          if (res.data.success == false) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
    },
    checkChange(e) {
      console.log(e.target.checked);
      this.forminitialC.viewChild = e.target.checked;
      this.getFaceRecordList();
    },
    handleChange(e) {
      this.forminitialC.readHead = e;
      this.getFaceRecordList();
    },
    timeOk(e) {
      this.forminitialC.startTime = this.$moment(e[0]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.forminitialC.endTime = this.$moment(e[1]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.getFaceRecordList();
    },
    onSearch() {
      this.getFaceRecordList();
    },

    discernList() {
      getStaffOrStudInfoList({ params: this.forminitialD })
        .then((res) => {
          this.DataA = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    areaSelect(value, key, extra) {
      console.log(extra.triggerNode.$attrs.cont);
      this.forminitialC.devId = extra.triggerNode.$attrs.cont.id;
      this.areaValue = extra.triggerNode.$attrs.cont.id;
      this.forminitialC.devId = 0;
      this.forminitialC.ymOrgTreeCode = "";
      this.forminitialC.areaCode = extra.triggerNode.$attrs.cont.areacode;
      this.getFaceRecordList();
    },
    getFaceRecordList() {
      getRecordList({ params: this.forminitialC })
        .then((res) => {
          this.innerData = res.data.data;
          console.log(res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    argumentSelect(data) {
      // this.forminitialD.ymOrgTreeCode = data.ymorgtreecode;
      // this.discernList();
      this.forminitialC.devId = 0;
      this.forminitialC.areaCode = "";
      this.forminitialC.ymOrgTreeCode = data.ymorgtreecode;
      this.getFaceRecordList();
      console.log(data);
    },
    callback(val) {
      if (val == 2) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
};
</script>

<style>
</style>
